.middle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle > div {
    flex-direction: column;
/ / column：主轴为垂直方向，起点在容器的上沿。 display: flex;
    justify-content: center;
    height: 900px;
    width: 900px;
}

.middle > div:nth-child(1) > div {
    display: flex;
    justify-content: center;
}

.middle > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    border: 2px solid rgb(218, 25, 80);
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.middle > div:nth-child(1) > div:nth-child(2) {
    background-color: rgb(47, 45, 50);
    height: 50px;
    margin-top: 30px;
    flex-direction: column-reverse;
}

.middle > div:nth-child(1) > div:nth-child(2) > div {
    /*width: 1000px;*/
    /*border: 1px solid rebeccapurple;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.middle > div:nth-child(1) > div:nth-child(2) > div > div {
    text-align: center;
    width: 200px;
    padding: 0 20px;
    line-height: 50px;
}

.middle > div > div:nth-child(2) > div {
    width: 900px;
    background-color: rgb(47, 45, 50);
    color: white;
}

.middle > div > div:nth-child(3) {
    display: flex;
    justify-content: center;
    margin-left: 50px;
    flex-wrap: wrap;
    width: 800px;
    height: 600px;
}

.middle > div > div:nth-child(3) > div {
    width: 200px;
    height: 300px;
}

.middle > div > div:nth-child(3) > div > div:nth-child(2) {
    display: flex;
    justify-content: center;
}

.middle > div > div:nth-child(3) > div > div:nth-child(3) {
    display: flex;
    justify-content: center;
}

.middle > div > div:nth-child(4) {
    width: 900px;
    height: 300px;
}
